<template>
  <div>
    <a-table :columns="columns" :data="walletList">
      <template #status="{ record }">
        <span v-if="record.status === 1">正常</span>
        <span v-else-if="record.status === 2">只存</span>
        <span v-else-if="record.status === 3">只出</span>
        <span v-else-if="record.status === -1">冻结</span>
      </template>
      <template #type="{ record }">
        <span v-if="record.type === 'amb-cost-cny'">成本账户</span>
        <span v-else-if="record.type === 'amb-profit-cny'">利润账户</span>
      </template>
      <template #withdrawable="{ record }">
        <span v-if="record.withdrawable === true">是</span>
        <span v-else-if="record.withdrawable === false">否</span>
      </template>
      <template #availabeBalance="{ record }">
        {{ record.availabeBalance.toFixed(2) }}
      </template>
      <template #freezeBalance="{ record }">
        {{ record.freezeBalance.toFixed(2) }}
      </template>
      <template #creditLimit="{ record }">
        {{ record.creditLimit.toFixed(2) }}
      </template>
      <template #userName="{ record }">
        <icon-user /> <a-button type="text" @click="onShowWalletDetail(record)">{{ record.userName }}</a-button>
      </template>
    </a-table>
  </div>

  <a-modal v-model:visible="walletDetail.visible" width="50%" top="50" :align-center="false">
    <template #title> 【{{ walletDetail.wallet.userName }}】 <span v-if="walletDetail.wallet.type === 'amb-cost-cny'">成本账户</span> <span v-else-if="walletDetail.wallet.type === 'amb-profit-cny'">利润账户</span></template>
    <wallet-account ref="walletAccount" :depositable="true" :transferable="true"></wallet-account>
    <template #footer>
      <a-button type="text" @click="walletDetail.visible = false">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { walletFind, walletDeposit, managerFindAccountItem, managerTransfer, managerFindWithdrawItem, managerWithdraw, managerFindAccount } from '@/api/finance/wallet'
  import { Message } from '@arco-design/web-vue'
  import { IconPlus, IconCheckCircle } from '@arco-design/web-vue/es/icon'
  import WalletAccount from './component/WalletAccount.vue'
  let walletList: any = ref([])
  const walletAccount: any = ref()
  let walletDetail: any = ref({
    visible: false,
    wallet: { availabeBalance: 0, freezeBalance: 0, creditLimit: 0 },
    deposit: { amount: 0 },
    transfer: { walletType: 'amb-profit-cny' },
    items: [],
  })

  //
  const columns = [
    {
      title: '用户ID',
      dataIndex: 'userId',
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      slotName: 'userName',
    },
    {
      title: '可提现?',
      dataIndex: 'withdrawable',
      slotName: 'withdrawable',
    },
    {
      title: '账户类型',
      dataIndex: 'type',
      slotName: 'type',
    },
    {
      title: '状态',
      dataIndex: 'status',
      slotName: 'status',
    },
    {
      title: '明细序',
      dataIndex: 'itemIndex',
      align: 'right',
      sortable: {
        sortDirections: ['itemIndex'],
      },
    },
    {
      title: '透支额',
      dataIndex: 'creditLimit',
      align: 'right',
      slotName: 'creditLimit',
      sortable: {
        sortDirections: ['creditLimit'],
      },
    },
    {
      title: '余额',
      dataIndex: 'availabeBalance',
      align: 'right',
      sortable: {
        sortDirections: ['availabeBalance'],
      },
      slotName: 'availabeBalance',
    },
    {
      title: '冻结',
      dataIndex: 'freezeBalance',
      align: 'right',
      sortable: {
        sortDirections: ['freezeBalance'],
      },
      slotName: 'freezeBalance',
    },
    {
      title: '开户时间',
      dataIndex: 'gmtCreate',
      sortable: {
        sortDirections: ['gmtCreate'],
      },
    },
    {
      title: '最近修改',
      dataIndex: 'gmtWrite',
      sortable: {
        sortDirections: ['gmtWrite'],
      },
    },
  ]

  const onShowWalletDetail = async (wallet: any) => {
    walletDetail.value.visible = true
    walletDetail.value.wallet = wallet
    walletAccount.value.load(wallet.id)
    //alert(walletAccount.value.load)
  }
  let onLoadWallet = async () => {
    let rs = await walletFind({ pageSize: 100, currentPage: 1 })
    walletList.value = rs?.data?.records || []
    //alert(JSON.stringify(rs))
  }

  onMounted(async () => {
    await onLoadWallet()
  })
</script>

<style></style>
